@import '../../../../../node_modules/bootstrap/scss/functions';
@import '../../../../../node_modules/bootstrap/scss/variables';
@import '../../../../../node_modules/bootstrap/scss/mixins';

$input-border-color: lighten(rgba(theme-color(primary), 0.8), 10%);
$input-border-active: #5c8de6;
$input-border-radius: 10px;
$input-background: theme-color(light);

.checkbox {
  width: 0px;
  position: relative;
}

input[type='checkbox'] {
  visibility: hidden;
}

.checkbox label {
  cursor: pointer;
  position: absolute;
  width: 1.5em;
  height: 1.5em;
  top: 0;
  border-radius: 4px;
  background: $input-background;
  border: 2px solid $input-border-color;
  border-bottom-color: rgba($input-border-color, 0.7);
  box-shadow: inset 0 1px 2px 2px rgba(0, 10, 30, 0.05);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
}

.checkbox label:after {
  -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)';
  filter: alpha(opacity=0);
  opacity: 0;
  content: '';
  position: absolute;
  width: 0.85em;
  height: 0.5em;
  background: transparent;
  top: 4px;
  left: 4px;
  border: 3px solid #333;
  border-top: none;
  border-right: none;

  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.checkbox label:hover::after {
  -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=30)';
  filter: alpha(opacity=30);
  opacity: 0.5;
}

.checkbox input[type='checkbox']:checked + label:after {
  -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
  filter: alpha(opacity=100);
  opacity: 1;
}

.form-check-label:hover {
  cursor: pointer;
}
